<template>
	<view>
		<s-layout :onShareAppMessage="shareInfo" navbar="normal" style="background-color: #F3F3F3"
		          title="商品详情页">
			<!-- 标题栏 -->
			<detailNavbar/>

			<!-- 骨架屏 -->
			<detailSkeleton v-if="state.skeletonLoading"/>
			<!-- 下架/售罄提醒 -->
			<s-empty
					v-else-if="state.goodsInfo === null"
					actionText="再逛逛"
					actionUrl="/pages/goods/list"
					icon="/static/soldout-empty.png"
					showAction
					text="商品不存在或已下架"
			/>
			<block v-else>
				<view class="detail-swiper-selector">
					<view style="height: 900rpx; background-color: #f5f5f5; position: relative;">
						<view class="sold-triangle">
							<text class="sold-label">预售商品</text>
						</view>
						<su-swiper
								:list="state.goodsSwiper"
								class="ss-m-b-14"
								dotCur="bg-mask-40"
								dotStyle="tag"
								height="900"
								heightimgHeight="900"
								imageMode="widthFix"
								isPreview
						/>
					</view>

					<!-- 价格+标题 -->
					<view class="title-card detail-card ss-p-y-60 ss-p-x-20 ss-m-t-15">
						<view class="tag-icon-box ss-flex ss-m-b-26">
							<view>
								<view class="ss-flex">
									<text class="logo-text">樱桃GO预售</text>
								</view>
							</view>
						</view>
						<view class="title-text ss-line-2 ss-m-b-6" @click="sheep.$helper.copyText(state.goodsInfo.product.name);">
							{{ state.goodsInfo.product.name }}
							<span style="
															font-weight: 400;
															text-decoration-line: underline;
															color: rgba(111, 170, 247, 1);
															text-align: left;
															margin-left: 10rpx;
															vertical-align: top;">
									点击复制</span>
						</view>
						<view class="ss-line-2">
							<!-- tag -->
							<uni-tag v-if="state.goodsInfo.product.productAttr.state == 0"
							         class="sold-label ss-m-r-10 ss-m-t-10"
							         text="预售商品"
							         custom-style="background-color: #0345d5; border-color: #0345d5; color: #fff;" size="small">
							</uni-tag>

							<uni-tag v-if="state.goodsInfo.product.productAttr.state == 1"
							         class="sold-label ss-m-r-10 ss-m-t-10"
							         text="现货商品"
							         custom-style="background-color: #0345d5; border-color: #0345d5; color: #fff;" size="small">
							</uni-tag>

							<uni-tag v-if="state.goodsInfo.product.productAttr.state == 2"
							         class="sold-label ss-m-r-10 ss-m-t-10"
							         text="预售咨询"
							         custom-style="background-color: #0345d5; border-color: #0345d5; color: #fff;" size="small">
							</uni-tag>

							<uni-tag
									:text="`汇率: 1日元 ≈ ${(state.goodsInfo.product.productAttr.rate)}元`"
									class="ss-m-r-10 ss-m-t-10"
									custom-style="background-color: #0345d5; border-color: #0345d5; color: #fff;"
									size="small"
							></uni-tag>

							<uni-tag
									:text="`发售日期${(state.goodsInfo.product.productAttr.saleDate)}`"
									class="ss-m-r-10 ss-m-t-10"
									custom-style="background-color: #0345d5; border-color: #0345d5; color: #fff;"
									size="small"
							></uni-tag>

							<uni-tag
									:text="`官网价格${(state.goodsInfo.product.productAttr.jpPrice)}`"
									class="ss-m-r-10 ss-m-t-10"
									custom-style="background-color: #0345d5; border-color: #0345d5; color: #fff;"
									size="small"
							></uni-tag>
						</view>
						<view class="subtitle-text ss-line-1 ss-m-t-15">{{ state.goodsInfo.product.nameZh }}</view>
						<view class="ss-flex ss-row-between ss-col-center ss-m-b-26 ss-m-t-15">
							<view class="sales-text" @click="sheep.$helper.copyText(state.goodsInfo.product.id);">
								商品ID: {{ state.goodsInfo.product.id }}
								<span style="
															font-weight: 400;
															text-decoration-line: underline;
															color: rgba(111, 170, 247, 1);
															text-align: left;
															margin-left: 10rpx;
															vertical-align: top;">
									点击复制</span>
							</view>
						</view>
						<view class="ss-flex ss-row-between ss-col-center ss-m-b-26">
							<view class="price-box ss-flex ss-col-bottom">
								<view class="price-text ss-m-r-16">
									{{ state.selectedSkuPrice.price || state.goodsInfo.product.price }}元
								</view>
							</view>
						</view>
					</view>

					<!-- 规格与数量弹框 -->
					<s-select-sku
							:goodsInfo="state.goodsInfo"
							:show="state.showSelectSku"
							@addCart="onAddCart"
							@buy="onBuy"
							@change="onSkuChange"
							@close="state.showSelectSku = false"
					/>

				</view>

				<!-- 详情 -->
				<detail-content-card :content="state.goodsInfo.product.detailHtml" :type="'html'"
				                     class="detail-content-selector ss-m-t-15"/>

				<view class="notice">
					<mp-html :content="state.preNoticeImg"></mp-html>
				</view>

				<!-- 详情tabbar  -->
				<detail-tabbar :share-icon="false" v-model="state.goodsInfo"
				               :product-id="state.goodsInfo.product.id">
					<view
							v-if="state.goodsInfo.product.publishStatus === 1 || state.enableSoldBuy"
							class="buy-box ss-flex ss-col-center ss-p-r-20">
						<button
								class="ss-reset-button add-btn ui-Shadow-Main"
								style="float: right"
								@tap="handlePurchase()"
						>
							加入清单
						</button>
						<button
								class="ss-reset-button buy-btn ui-Shadow-Main"
								style="float: right"
								@tap="handlePurchase()"
						>
							立即下单
						</button>
					</view>
					<view v-else class="ss-flex ss-col-center ss-p-r-20">
						<button class="ss-reset-button disabled-btn" disabled></button>
					</view>
				</detail-tabbar>
				<s-coupon-get
						v-model="state.couponInfo"
						:show="state.showModel"
						@close="state.showModel = false"
						@get="onGet"
				/>
				<s-activity-pop
						v-model="state.activityInfo"
						:show="state.showActivityModel"
						@close="state.showActivityModel = false"
				/>
			</block>
		</s-layout>
	</view>
</template>

<script setup>
import {computed, reactive} from 'vue';
import {onLoad, onPageScroll} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {formatGoodsSwiper} from '@/sheep/hooks/useGoods';
import detailNavbar from './components/detail/detail-navbar.vue';
import detailTabbar from './components/detail/detail-tabbar.vue';
import detailSkeleton from './components/detail/detail-skeleton.vue';
import detailContentCard from './components/detail/detail-content-card.vue';

import {isEmpty} from 'lodash';


// import detailTab from './components/detail/detail-tab.vue';
// import detailCoupon from './components/detail/detail-coupon.vue';
onPageScroll(() => {
});

const state = reactive({
	goodsId: 0,
	platform: 0,
	noticeInfo: {},
	preNoticeImg: {},
	enableSoldBuy: false,
	skeletonLoading: true,
	goodsInfo: {},
	showSelectSku: false,
	goodsSwiper: [],
	selectedSkuPrice: {},
	showModel: false,
	total: 0,
	couponInfo: [],
	showActivityModel: false,
	activityInfo: [],
});

function handlePurchase() {
	// 对商品的内容进行检查
	// 商品详细信息中包含如下字 不允许下单（様専用、購入前コメン卜、即購入不可）
	if (state.goodsInfo.product.name.includes('即購入不可') || state.goodsInfo.product.name.includes('即購入❌') || state.goodsInfo.product.name.includes('❌即購入') ||
			state.goodsInfo.product.detailHtml.includes('即購入不可') || state.goodsInfo.product.detailHtml.includes('即購入❌') || state.goodsInfo.product.detailHtml.includes('❌即購入')) {
		// 确认框
		uni.showModal({
			title: `商品无法下单`,
			content: `商品明确标注是【即購入不可/即購入❌】，您不能立即下单！所以请点击发布留言留言`,
			success: async function (res) {
				if (res.confirm) {
					state.showSelectSku = true;
				}
			},
		});
		return;
	} else if (state.goodsInfo.product.name.includes('購入前コメン卜') || state.goodsInfo.product.detailHtml.includes('購入前コメン卜')) {
		// 确认框
		uni.showModal({
			title: `下单前请留言`,
			content: `商品要求【購入前コメン卜】所以请点击发布留言留言`,
			success: async function (res) {
				if (res.confirm) {
					state.showSelectSku = true;
				}
			},
		});
	} else if (state.goodsInfo.product.name.includes('様専用') || state.goodsInfo.product.detailHtml.includes('様専用')) {
		// 确认框
		uni.showModal({
			title: `这是一个专用链接`,
			content: `专用链接商品规定专人下单，请您确认这是您的专用链接么？`,
			success: async function (res) {
				if (res.confirm) {
					state.showSelectSku = true;
				}
			},
		});
	} else {
		state.showSelectSku = true;
	}
}

// 规格变更
function onSkuChange(e) {
	console.log('e', e)
	state.selectedSkuPrice = e;
}

// 添加清单
function onAddCart(e) {
	sheep.$store('cart').add(e).then(res => {
		state.showSelectSku = false
	});
}

// 立即下单
function onBuy(e) {
	console.log('下单物品：', e)
	sheep.$router.go('/pages/order/confirm', {
		data: JSON.stringify({
			order_type: 'goods',
			goods_list: [
				{
					goods_id: e.productId,
					goods_num: e.buyNum,
					skuId: e.id
				},
			],
		}),
	});
	state.showSelectSku = false
}

//营销活动
function onActivity() {
	state.activityInfo = state.goodsInfo.promos;
	state.showActivityModel = true;
}

//立即领取
async function onGet(id) {
	const {error, msg} = await sheep.$api.coupon.get(id);
	if (error === 0) {
		uni.showToast({
			title: msg,
		});
		setTimeout(() => {
			getCoupon();
		}, 1000);
	}
}

const shareInfo = computed(() => {
	return {}
	if (isEmpty(state.goodsInfo)) return {};
	return sheep.$platform.share.getShareInfo(
			{
				title: state.goodsInfo.title,
				image: sheep.$url.cdn(state.goodsInfo.image),
				desc: state.goodsInfo.subtitle,
				params: {
					page: '2',
					query: state.goodsInfo.id,
				},
			},
			{
				type: 'goods', // 商品海报
				title: state.goodsInfo.title, // 商品标题
				image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
				price: state.goodsInfo.price[0], // 商品价格
				original_price: state.goodsInfo.original_price, // 商品原价
			},
	);
});

onLoad(async (options) => {
	// 非法参数
	if (!options.id) {
		state.goodsInfo = null;
		return;
	}
	state.goodsId = options.id;
	if (!sheep.$helper.isRealEmpty(options.platform)) {
		state.platform = options.platform;
	}

	/*let preNoticeImg = uni.getStorageSync("preNoticeImg")
	if (sheep.$helper.isRealEmpty(preNoticeImg)) {
		// 获取通知返图的海报
		const resImg = await sheep.$api.coupon.detail(39, null);
		state.preNoticeImg = resImg.data;
		// 设置缓存
		uni.setStorageSync("preNoticeImg", state.preNoticeImg)
	} else {
		state.preNoticeImg = preNoticeImg;
	}*/

	state.preNoticeImg = '<img src="https://xiaozhan-shop.oss-cn-beijing.aliyuncs.com/2024/07/01bbaaace404b74fb9b1ba57da42f24ac5ys_notice.jpg" style="width: 100%;height: auto;" alt="">';

	let enableSoldBuy = await sheep.$api.order.channelList({type: 'enable_sold_buy'});
	if (!sheep.$helper.isRealEmpty(enableSoldBuy) && enableSoldBuy.length > 0) {
		let data = enableSoldBuy[0];
		if (data.dictValue == '1') {
			state.enableSoldBuy = true;
		}
	}

	// 加载商品信息
	sheep.$api.goods.detailPre(state.goodsId, {platform: state.platform}).then((res) => {
		console.log('商品数据：', res)
		if (sheep.$helper.isRealEmpty(res.product)) {
			uni.showModal({
				title: '提示',
				content: '预售商品无法下单，可能已下架',
				showCancel: false,
				confirmText: '知道了',
				success: async function (res) {
					sheep.$router.back();
				}
			});
		} else {
			state.skeletonLoading = false;
			state.goodsInfo = res;
			state.goodsInfo.product.productAttr = JSON.parse(state.goodsInfo.product.productAttr)
			state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.product.albumPics.split(','));
			console.log('图册：', state.goodsSwiper)

		}
	});
	// const { error, data } = await sheep.$api.coupon.listByGoods(state.goodsId);
	// if (error === 0) {
	//   state.couponInfo = data;
	// }
});
</script>

<style lang="scss" scoped>

.notice {
	margin-top: 30rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 1px 1px 50px #dadada;
}

.sold-triangle {
	position: fixed;
	width: 100%;
	z-index: 888;
	height: 90rpx;
	background: #0345D5;

	.sold-label {
		position: fixed;
		left: 5%;
		color: white;
		padding-top: 20rpx;
		font-weight: 700;
		font-size: 22px;
		margin-left: 20rpx !important;
		font-style: oblique;
	}
}

.detail-card {
	background-color: #ffff;
	margin: 14rpx 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

// 价格标题卡片
.title-card {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 50rpx;
	box-shadow: 1px 1px 50px #dadada;

	.price-box {
		.price-text {
			font-size: 26px;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 22.13px;
			color: #0345d5;
			text-align: left;
			vertical-align: top;

			&::before {
				//content: '￥';
				//font-size: 30rpx;
			}
		}

		.origin-price-text {
			font-size: 26rpx;
			font-weight: 400;
			text-decoration: line-through;
			color: $gray-c;
			font-family: OPPOSANS;

			&::before {
				content: '￥';
			}
		}
	}

	.sales-text {
		font-size: 26rpx;
		font-weight: 500;
		color: $gray-c;
	}

	.discounts-box {
		.tag-content {
			flex: 1;
			min-width: 0;
			white-space: nowrap;
		}

		.tag-box {
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.tag {
			flex-shrink: 0;
			padding: 4rpx 10rpx;
			font-size: 24rpx;
			font-weight: 500;
			border-radius: 4rpx;
			color: #0345d5;
			background: var(--ui-BG-Main-tag);
		}

		.discounts-title {
			font-size: 24rpx;
			font-weight: 500;
			color: #0345d5;
			line-height: normal;
		}

		.cicon-forward {
			color: #0345d5;
			font-size: 24rpx;
			line-height: normal;
			margin-top: 4rpx;
		}
	}

	.title-text {
		font-size: 30rpx;
		font-weight: bold;
		line-height: 42rpx;
	}

	.subtitle-text {
		font-size: 26rpx;
		font-weight: 400;
		color: $dark-9;
		line-height: 42rpx;
		white-space: pre-wrap; // 保持文本的格式并允许自动换行
		word-wrap: break-word; // 长单词或URL内部断行，防止溢出
		overflow-wrap: break-word; // 提高兼容性
	}
}

// 下单
.buy-box {
	position: absolute;
	right: 5rpx;

	.add-btn {
		width: 214rpx;
		height: 72rpx;
		font-weight: 500;
		font-size: 28rpx;
		border-radius: 40rpx 0 0 40rpx;
		background-color: rgba(3, 69, 213, 0.67);
		color: #ffffff;
	}

	.buy-btn {
		width: 214rpx;
		height: 72rpx;
		font-weight: 500;
		font-size: 28rpx;

		border-radius: 0 40rpx 40rpx 0;
		background: linear-gradient(90deg, #0345d5, #0345d5);
		color: $white;
	}

	.disabled-btn {
		justify-content: center;
		width: 650rpx;
		height: 90rpx;
		background-repeat: no-repeat;
		//background-image: url("@/static/sold-info.png");
	}
}

.model-box {
	height: 60vh;

	.model-content {
		height: 56vh;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.subtitle {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}
}

.tag-icon-box {
	border-bottom: 1px solid #0345d5;
	padding-bottom: 20rpx;

	.logo-text {
		font-size: 30rpx;
		font-weight: 600;
	}

	.logo-info {
		font-size: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-weight: 600;
		color: #0345d5;
	}

	.logo-text-intro {
		font-size: 30rpx;
		color: #0345d5;
		font-weight: 600;
	}

	.tag-icon {
		width: 82rpx;
		height: 32rpx;
	}
}
</style>
